<template>
  <a-spin :spinning="spinning" size="large">
    <a-row type="flex" class="header" justify="space-between" align="middle">
      <a-col :xxl="8" :xl="8" :md="8" :sm="12" :xs="24" >
        <h2 style="color: #FFF;"><span style="cursor: pointer;" @click="$router.push('/dashboard')">窑炉工业云监控大屏</span></h2>
      </a-col>
      <a-col :xxl="3" :xl="5" :md="8" :sm="8" :xs="24" ><h5 style="color: #FFF;">当前时间：{{date}}</h5></a-col>
    </a-row>
    <a-row :gutter="10" type="flex" class="main mt10" style="margin-right: 0px;" justify="space-between" align="top">
      <a-col :md="6" :xs="24">
        <div style="height: 400px;">
          <h4>设备在线统计</h4>
          <pieChart :onLine="isOnLineData.onLine" :offLine='isOnLineData.offLine' :LineData="isOnLineData"></pieChart>
        </div>
        <div style="height: 400px;">
          <h4>近30天新增设备数</h4>
          <a-table :pagination="false" :columns="equipmentFields" :dataSource="dataLists.equipment"
            :rowKey="record => record.id"
            :scroll="{ y: 300 }"
          ></a-table>
        </div>
      </a-col>
      <a-col :md="13" :xs="24">
        <div style="height: 500px;">
          <baidu-map :scroll-wheel-zoom="true" :center="centerVal" @ready="baiduMap">
            <bm-view id="map" class="map"></bm-view>
            <bm-marker v-for="item in mapLists" :icon="{url: isIcon(item.is_OnLine), size: {width: 30, height: 30}}" :key="item.id" :position="{lng: item.longitude, lat: item.latitude}">
              <bm-label :content="item.name" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: 12, height: -10}"/>
            </bm-marker>
            <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
          </baidu-map>
        </div>
        <div style="height: 300px;">
          <h4>最新报警</h4>
          <!-- :columns="columns" :dataSource="data" -->
          <a-table :pagination="false" :columns="alarmFields" :dataSource="dataLists.alarmRecord"
            :rowKey="record => record.id"
            :scroll="{ y: 220 }"
          ></a-table>
        </div>
      </a-col>
      <a-col :md="5" style="padding-right: 0px;" :xs="24">
        <!-- <div style="height: 250px;">警情记录</div> -->
        <div style="height: 810px;">
          <h4>设备分组列表</h4>
          <a-table :pagination="false" :columns="companyFields" :dataSource="GradeList"
            :rowKey="record => record.id" :scroll="{ y: 730 }"
          >
          <span class="overflow-ellipsis" style="width: 138px;display:block;" slot="company_name" slot-scope="text, record">{{text}}</span>
          <span class="overflow-ellipsis" style="width: 138px;display:block;" slot="equipment_name" slot-scope="text, record">{{text}}</span>
          </a-table>
        </div>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex';
import { pieChart } from './component/index'; // 机器在线离线提示器

export default {
  name: 'screen',
  components: {
    pieChart,
  },
  data() {
    return {
      companyFields: [
        {
          title: '公司名称',
          dataIndex: 'company_name',
          key: 'company_name',
          align: 'center',
          width: '50%',
          scopedSlots: { customRender: 'company_name' },
        },
        {
          title: '设备名称',
          dataIndex: 'equipment_name',
          key: 'equipment_name',
          align: 'center',
          width: '50%',
          scopedSlots: { customRender: 'equipment_name' },
        },
      ],
      equipmentFields: [
        {
          title: '设备名称',
          dataIndex: 'name',
          key: 'name',
          align: 'center',
          width: '50%',
        },
        {
          title: '时间',
          dataIndex: 'created_at',
          key: 'created_at',
          align: 'center',
          width: '50%',
        },
      ],
      alarmFields: [
        {
          title: '单位名称',
          dataIndex: 'company_name',
          key: 'company_name',
          align: 'center',
          width: '20%',
        },
        {
          title: '设备名称',
          dataIndex: 'equipment_name',
          key: 'equipment_name',
          align: 'center',
          width: '20%',
        },
        {
          title: '数据名称',
          dataIndex: 'register_name',
          key: 'register_name',
          align: 'center',
          width: '20%',
        },
        {
          title: '触发条件',
          dataIndex: 'content',
          key: 'content',
          align: 'center',
          width: '20%',
        },
        {
          title: '报警时间',
          dataIndex: 'alarm_time',
          key: 'alarm_time',
          align: 'center',
          width: '20%',
        },
      ],
      date: '',
      spinning: false,
      // 地图
      centerVal: '中国',
      BMap: '',
      map: '',
    };
  },
  watch: {
    mapLists() {
      this.dataChange();
    },
  },
  computed: {
    ...mapState({
      dataLists: state => state.screen.dataLists,
      mapLists: state => state.controlCenter.homeMapLists,
      isOnLineData: state => state.equipment.isOnLineData,
      GradeList: state => state.screen.GradeList,
    }),
  },
  mounted() {
    this.changeData();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
    if (this.timer2) {
      clearInterval(this.timer2);
    }
  },
  methods: {
    isIcon(val) {
      if (val == 1) {
        return require('@images/position_green.png');
      }
      return require('@images/position_red.png');
    },
    dateFormat() {
      this.timer = setInterval(() => {
        const date = new Date();
        const year = date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
           * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
           * */
        const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
        const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
        const hours = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
        const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
        const seconds = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
        // 拼接
        this.date = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }, 1000);
      this.timer2 = setInterval(() => {
        this.getLists();
        this.isOnLine();
        this.getBigScreenLists();
        this.getGroupEquipment();
      }, 10000);
    },
    ...mapActions({
      getLists: 'controlCenter/HomeMapLists', // 地图
      isOnLine: 'equipment/isOnLine', // 设备在线状态
      getBigScreenLists: 'screen/getBigScreenLists', // 监控大屏数据
      getGroupEquipment: 'screen/getGroupEquipment', // 分组列表

    }),
    /* 百度地图 */
    // 获取数据
    changeData() {
      this.spinning = true;
      this.getLists();
      this.isOnLine();
      this.getGroupEquipment();
      this.getBigScreenLists();
      this.dateFormat();
      setTimeout(() => {
        this.spinning = false;
      }, 800);
    },
    // 渲染
    dataChange() {
      const { BMap } = this;
      const { map } = this;
      const points = [];
      this.mapLists.forEach((item) => {
        if (item.longitude != null && item.latitude != null) {
          const point = {
            lat: item.latitude,
            lng: item.longitude,
          }; // 创建地理坐标点
          points.push(point);
        }
      });
      // 根据标注点位置设置缩放比例
      const view = map.getViewport(eval(points));
      const mapZoom = view.zoom;
      const centerPoint = view.center;
      map.centerAndZoom(centerPoint, mapZoom);
    },
    // 百度地图回调
    baiduMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
    },
    /* 百度地图end */
  },
};
</script>

<style scoped>
  .header {
    padding: 12px 28px;
    background: #001529;
    box-sizing: border-box;
  }

  .main div div {
    margin-bottom: 10px;
    background: #f0f0f0;
  }
  .main div div h4{
    /* text-align: center; */
    padding: 5px;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 18px;
    background: #0d335d;
    color: #fff;
  }
  #map {
    width: 100%;
    height: 500px;
    /* min-height: 400px; */
  }
</style>
